<template>
	<view class="user">
		<cu-custom bgImage="" :isBack="true"><block slot="backText">返回</block>
			<block slot="content">记账簿</block>
		</cu-custom>
		<!-- 头部 -->
		<view class="user-wrap">
			<view class="setting iconfont icon31shezhi"></view>
			<view class="info">
				<image class="avatar" mode="aspectFill" :src="uerInfo.avatarUrl"></image>
				<view class="nickname">{{ uerInfo.nickName }}</view>
			</view>
		</view>

		<!-- 订单状态 -->
		<view class="order-status">
			<view class="status-wrap">
				<!-- 单元格 -->
				<view class="cell">
					<view class="cell-left">
						<image class="cell-icon" src="/static/images/user/icon-order.png" mode="aspectFill"></image>
						<view class="cell-text">生活娱乐</view>
					</view>
					<view class="iconfont iconmore1"></view>
				</view>

				<!-- 订单状态 -->
				<view class="status-list">
					<view class="status-item" @tap='firstTo(index)' hover-class="btn-hover" v-for="(item, index) in orderStatusList" :key="index">
						<view class="item-icon" :class="item.icon"></view>
						<view class="item-text">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 滑动导航 -->
		<view style="border-radius: 20rpx; overflow: hidden; margin: 0 20rpx;">
			<com-nav :list="list" :col="4"></com-nav>
		</view>

		<!-- 用户功能 -->
		<view class="com-item">
			<view class="com-wrap">
				<view class="cell" v-for="(item, index) in userList" :key="index">
					<view class="cell-left">
						<image class="cell-icon" :src="item.icon" mode="aspectFill"></image>
						<view class="cell-text">{{ item.title }}</view>
					</view>
					<view class="iconfont iconmore1"></view>
				</view>
			</view>
		</view>

		<!-- 用户服务 -->
		<view class="com-item">
			<view class="com-wrap">
				<view class="cell" v-for="(item, index) in serverList" :key="index">
					<view class="cell-left">
						<image class="cell-icon" :src="item.icon" mode="aspectFill"></image>
						<view class="cell-text">{{ item.title }}</view>
					</view>
					<view class="iconfont iconmore1"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import comNav from './components/com-nav.vue'
	let _self;
	export default {
		components: {
			comNav
		},
		data() {
			return {
				login: false,
				avatarUrl: "/static/images/avatar.png",
				uerInfo: {},
				orderStatusList: [
					{ name: '每日新闻', icon: 'iconfont icon31daifukuan', status: 10 },
					{ name: 'One 一个', icon: 'iconfont icon31daifahuo', status: 30 },
					{ name: '翟翟机器人', icon: 'iconfont icon31daishouhuo', status: 40 },
					{ name: '待评价', icon: 'iconfont icon31daipingjia', status: 50 },
					// { name: '已完成', icon: 'iconfont icon31yiguanzhudianpu', status: 55 }
				],
				currentIndex: 0,
				list: [
					{
						icon: '/static/images/user/class-01.png',
						text: '我的电子券'
					},
					{
						icon: '/static/images/user/class-02.png',
						text: '退换/售后'
					},
					{
						icon: '/static/images/user/class-03.png',
						text: '我的积分'
					},
					{
						icon: '/static/images/user/class-04.png',
						text: '送礼提醒'
					}
				],
				serverList: [
					{
						title: '客服中心',
						icon: '/static/images/user/icon-kefu.png',
						path: 'kefu'
					},
					{
						title: '帮助中心',
						icon: '/static/images/user/icon-help.png',
						path: 'help'
					},
					{
						title: '版本',
						icon: '/static/images/user/icon-about.png',
						text: '1.0.0'
					}
				],
				userList: [
					{
						title: '收货地址',
						icon: '/static/images/user/icon-address.png',
						path: 'address-list'
					},
					{
						title: '我的收藏',
						icon: '/static/images/user/icon-collect.png',
						path: 'collect-list'
					},
					{
						title: '我的足迹',
						icon: '/static/images/user/icon-foot.png',
						path: 'browse-list'
					}
				],
			}
		},
		onLoad() {
			_self = this;
			this.getdata()
		},
		onShow() {
			let userinfo = uni.getStorageSync('userInfo');
			if (userinfo) {
				_self.login = true;
				_self.uerInfo = userinfo;
			}
		},
		methods: {
			//定时获取所有的爬虫数据
			getdata() {
				uniCloud
					.callFunction({
						name: 'get_One',
						
					})
				uniCloud
					.callFunction({
						name: 'get_headlineNews',
						data:{
							type:1
						}
					})
					
					
			},
			
			firstTo(index){
				console.log(index);
				
				switch(index){
					case 0 :
					uni.navigateTo({
						url:'/pages/mine/first/first'
					})
					break;
					case 1 :
					uni.navigateTo({
						url:'/pages/mine/second/second',
						complete(res) {
							console.log(res);
						}
					})
					break;
					case 2 :
					uni.navigateTo({
						url:'/pages/mine/three/three',
						complete(res) {
							console.log(res);
						}
					})
					break;
				}
				
			},
			
			
			
			goLogin() {
				if (!_self.login) {
					uni.navigateTo({
						url: '/pages/user/login'
					});
				} else {
					_self.logOff();
				}
			},
			/**
			 * 注销
			 */
			logOff() {
				uni.showModal({
					title: '确认操作',
					content: '是否退出登录?',
					showCancel: true,
					success: (res) => {
						if (res.confirm) {
							uni.setStorageSync('userInfo', null);
							_self.login = false;
							_self.uerInfo = null;
							uni.navigateTo({
								url: '/pages/user/login'
							});
						} else if (res.cancel) {

						}
					}
				});
			},
			gourl(url) {
				if (this.login) {
					uni.navigateTo({
						url: url
					});
				} else {
					uni.navigateTo({
						url: 'login'
					});
				}
			}
		}
	}
</script>

<style lang="scss">
page {
	// background: #f2f2f2;
	height: auto;
}
.btn-hover {
	background: #f2f2f2 !important;
}
.user {
	.user-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 50vw;
		padding: 30rpx;
		z-index: 9;
		border-radius: 0 0 20% 20%;
		// background: url('https://handsel.oss-cn-shenzhen.aliyuncs.com/1588938371592.jpg') no-repeat;
		background: url('https://img-shop.qmimg.cn/s16/images/2020/01/20/9a82219bedcae5c2.jpeg') no-repeat;
		background-size: cover;
		.setting {
			color: #fff;
			position: absolute;
			top: 60rpx;
			left: 60rpx;
			font-size: 50rpx;
		}
		.info {
			position: absolute;
			text-align: center;
			.avatar {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
			}
			.nickname {
				color: #fff;
				font-size: 28rpx;
			}
		}
	}
	.order-status {
		padding: 0 20rpx;
		margin-top: -10vw;
		.status-wrap {
			border-radius: 25rpx;
			overflow: hidden;
			.status-list {
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				background: #fff;
				padding-top: 30rpx;
				padding-bottom: 30rpx;
				.status-item {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.item-icon {
						line-height: 1;
						font-size: 65rpx;
						color: #bbb;
					}
					.item-text {
						font-size: 28rpx;
						color: #666;
						margin-top: 5rpx;
					}
				}
			}
		}
	}
	.com-item {
		padding-left: 20rpx;
		padding-right: 20rpx;
		margin-top: 20rpx;
		.com-wrap {
			border-radius: 25rpx;
			overflow: hidden;
		}
	}
	.cell {
		height: 80rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		border-bottom: 1px solid #f8f8f8;
		&:active {
			background: #f2f2f2;
		}
		&:last-child {
			border-bottom: none !important;
		}
		.cell-left {
			display: flex;
			align-items: center;
			.cell-icon {
				width: 50rpx;
				height: 50rpx;
			}
			.cell-text {
				color: #666;
				font-size: 28rpx;
				margin-left: 20rpx;
			}
		}
		.iconfont {
			font-size: 40rpx;
			color: #999;
		}
	}
}
</style>
